<template>
	<app-layout>
		<view>
			<view class="attr" v-for="(item,index) in list" :key="index">
				<image @click='pop(index)' class='low-attr' src='./../image/low.png'></image>
				<view class="attr-item dir-left-nowrap">
					<view class="attr-label">规格名</view>
					<view class='dir-left-nowrap cross-center'>
						<input placeholder-style="color: #cdcdcd" placeholder="请输入规格" @input="changeName(item)"
							class='input' v-model="item.attr_group_name" />
					</view>
				</view>
				<view class="attr-item dir-left-nowrap">
					<view class="attr-label">规格值</view>
					<view @click="changeValue(index)">
						<view class="attr_name" v-if="item.attr_list.length > 0">
							<image class="to-more" src='/static/image/icon/arrow-right.png'></image>
							<view class="attr-name-list t-omit">
								<text v-for="(attr,idx) in item.attr_list" :key="idx"><text
										v-if="idx !== 0">；</text>{{attr.attr_name}}</text>
							</view>
						</view>
						<view v-else class='cat-info dir-right-nowrap cross-center'>
							<image class="to-more" src='/static/image/icon/arrow-right.png'></image>
							<text style="color: #cdcdcd">未选择</text>
						</view>
					</view>
					<view>
					</view>
				</view>
			</view>
		</view>
		<view class='title'>设置价格、库存等规格明细</view>
		<view class='info-item cross-center main-between'>
			<view class="form-label">规格明细</view>
			<view @click="chooseDetail">
				<view class='cat-info dir-right-nowrap cross-center'>
					<image class="to-more" src='/static/image/icon/arrow-right.png'></image>
					<text v-if="attr.length > 0">已设置</text>
					<text style="color: #cdcdcd" v-else>未设置，点击设置</text>
				</view>
			</view>
		</view>
		<view v-if="list.length < 5" class='add-attr' @click='add_attr'>
			<view class='add-attr-btn main-center'>
				<image src='./../image/add.png'></image>
				<view>增加规格</view>
			</view>
		</view>
		<view :class="['placeholder', `${iphone_x? 'iphone_x':''}`]"></view>
		<view :class="['add', `${iphone_x? 'iphone_x':''}`]">
			<view @click="save">保存</view>
		</view>
		<view class='dialog' v-if="index > -1">
			<view class='dialog-item'>
				<view class='dialog-title'>确定删除这个规格吗？</view>
				<view class="submit-info">删除后，规格名与规格值都将被删除</view>
				<view class="main-center btn-area">
					<view class="submit-btn" @click='close'>取消</view>
					<view class="line"></view>
					<view class="submit-btn be-submit" @click='toDelete'>确认</view>
				</view>
			</view>
		</view>
	</app-layout>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				attr: [],
				iphone_x: false,
				noDetail: true,
				first: true,
				index: -1,
			}
		},

		methods: {
			changeName(item) {
				let that = this;
				if (this.attr.length > 0) {
					for (let i in this.attr) {
						for (let j in this.attr[i].attr_list) {
							if (item.attr_group_id == this.attr[i].attr_list[j].attr_group_id) {
								this.attr[i].attr_list[j].attr_group_name = item.attr_group_name;
							}
						}
					}
					uni.setStorage({
						key: "temp_attr_info",
						data: that.attr,
						success() {
							uni.hideLoading();
						},
						fail(res) {
							uni.hideLoading();
							uni.showToast({
								title: res.errMsg,
								icon: 'none',
								duration: 1000
							});
						}
					})
				}
			},
			pop(index) {
				this.index = index;
				if (!this.list[this.index].attr_group_name && this.list[this.index].attr_list.length === 0) {
					this.list.splice(this.index, 1);
					this.index = -1;
					this.attr = [];
					uni.removeStorage({
						key: 'temp_attr_info'
					})
				}
			},
			close() {
				this.index = -1;
			},
			changeValue(index) {
				uni.setStorage({
					key: "temp_attr",
					data: this.list
				})
				uni.navigateTo({
					url: `/plugins/solitaire/goods/editspecs?index=${index}`
				})
			},
			chooseDetail() {
				if (this.list.length === 0) {
					uni.showToast({
						title: '请输入规格信息',
						icon: 'none',
						duration: 1000
					});
					return false
				} else {
					let number = 1;
					for (let i in this.list) {
						number *= +this.list[i].attr_list.length;
					}
					if (number > 1000) {
						uni.showToast({
							title: '规格组合超出1000，请删减规格值再继续操作',
							icon: 'none',
							duration: 1000
						});
						return false
					}
				}
				for (let i in this.list) {
					if (!this.list[i].attr_group_name || this.list[i].attr_list.length == 0) {
						uni.showToast({
							title: '请完善规格信息',
							icon: 'none',
							duration: 1000
						});
						return false;
					}
				}
				uni.setStorage({
					key: "temp_attr",
					data: this.list
				})
				uni.navigateTo({
					url: '/pages/app_admin/goods-attr-info/goods-attr-info'
				})
			},
			toDelete() {
				this.list.splice(this.index, 1);
				this.index = -1;
				this.attr = [];
				uni.removeStorage({
					key: 'temp_attr_info'
				})
			},
			save() {
				let that = this;
				if (that.list.length === 0) {
					uni.showToast({
						title: '请输入规格信息',
						icon: 'none',
						duration: 1000
					});
					return false
				}
				for (let i in that.list) {
					if (!that.list[i].attr_group_name || that.list[i].attr_list.length === 0 || that.attr.length === 0) {
						uni.showToast({
							title: '请完善规格信息',
							icon: 'none',
							duration: 1000
						});
						return false;
					}
				}
				uni.setStorage({
					key: "goods_attr_groups",
					data: that.list
				})
				uni.showLoading({
					title: '保存中...'
				});
				uni.setStorage({
					key: "goods_attr",
					data: that.attr,
					success() {
						uni.hideLoading();
						setTimeout(function() {
							uni.navigateBack();
						}, 500);
					},
					fail(res) {
						uni.hideLoading();
						uni.showToast({
							title: res.errMsg,
							icon: 'none',
							duration: 1000
						});
					}
				})
			},
			add_attr() {
				this.list.push({
					attr_group_id: this.list.length + 1,
					attr_group_name: '',
					attr_list: []
				});
				this.attr = [];
				uni.removeStorage({
					key: 'temp_attr_info'
				});
			}
		},

		onLoad() {
			let that = this;
			that.$showLoading({
				type: 'global',
				text: '加载中...'
			});
			let loadAttr = false;
			uni.getStorage({
				key: 'goods_attr_groups',
				success(res) {
					that.list = res.data
					uni.setStorage({
						key: "temp_attr",
						data: that.list
					})
					loadAttr = true;
				},
				fail() {
					uni.getStorage({
						key: 'temp_attr',
						success(res) {
							that.list = res.data;
						}
					})
					loadAttr = true;
				}
			})
			uni.getStorage({
				key: 'goods_attr',
				success(res) {
					that.attr = res.data;
					uni.setStorage({
						key: "temp_attr_info",
						data: res.data
					})
					that.$hideLoading();
					that.first = false;
				},
				fail() {
					uni.getStorage({
						key: 'temp_attr_info',
						success(res) {
							that.attr = res.data;
							that.first = false;
							that.$hideLoading();
						},
						fail() {
							that.first = false;
							that.$hideLoading();
						}
					})
				}
			})
			uni.getSystemInfo({
				success: function(res) {
					if (res.model.indexOf('iPhone X') > -1 || res.model.indexOf('iPhone 11') > -1 || res.model
						.indexOf('iPhone11') > -1 || res.model.indexOf('iPhone12') > -1 || res.model.indexOf(
							'Unknown Device') > -1) {
						that.iphone_x = true;
					}
				}
			})
		},
		onShow() {
			let that = this;
			if (!this.first) {
				uni.getStorage({
					key: 'temp_attr',
					success(res) {
						that.list = res.data
					},
					fail() {
						that.list = [];
					}
				})
				uni.getStorage({
					key: 'temp_attr_info',
					success(res) {
						that.attr = res.data;
					},
					fail() {
						that.attr = [];
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.attr {
		background-color: #fff;
		position: relative;
		padding-left: #{84rpx};
		margin-bottom: #{20rpx};

		.low-attr {
			position: absolute;
			z-index: 2;
			top: #{24rpx};
			height: #{40rpx};
			width: #{40rpx};
			left: #{24rpx};
		}

		.attr-item {
			height: #{88rpx};
			line-height: #{88rpx};
			border-top: #{2rpx} solid #e2e2e2;
			position: relative;
			font-size: #{28rpx};
			color: #999;
			color: #353535;

			.attr-label {
				width: #{174rpx};
				flex-shrink: 0;
			}

			.attr_name {
				.to-more {
					right: #{24rpx};
					top: #{32rpx};
					position: absolute;
					margin-left: 0;
				}

				.attr-name-list {
					width: #{432rpx};
				}
			}

			.cat-info {
				width: #{442rpx};
			}

			.to-more {
				height: #{24rpx};
				width: #{12rpx};
				margin-left: #{10rpx};
			}
		}

		.attr-item:first-of-type {
			border-top: 0;
		}
	}

	.title {
		font-size: #{28rpx};
		color: #999;
		margin: #{30rpx} #{24rpx} #{13rpx};
	}

	.info-item {
		height: #{88rpx};
		line-height: #{88rpx};
		font-size: #{28rpx};
		background-color: #fff;
		padding: 0 #{24rpx};
		color: #353535;

		.form-label {
			width: #{176rpx};
		}

		.cat-info {
			width: #{526rpx};
			color: #666;

			.to-more {
				height: #{24rpx};
				width: #{12rpx};
				margin-left: #{10rpx};
			}
		}
	}

	.add-attr {
		height: #{120rpx};
		background-color: #fff;
		margin-top: 20rpx;
		padding-top: #{24rpx};

		.add-attr-btn {
			height: #{72rpx};
			width: #{320rpx};
			border-radius: #{36rpx};
			border: #{2rpx} solid #446dfd;
			margin: 0 auto;
			color: #446dfd;
			font-size: #{26rpx};
			line-height: #{72rpx};

			image {
				height: #{28rpx};
				width: #{28rpx};
				margin-right: #{12rpx};
				margin-top: #{22rpx};
			}
		}
	}

	.add {
		position: fixed;
		bottom: 0;
		left: 0;
		height: #{120rpx};
		width: 100%;
		z-index: 15;
		background-color: #fff;

		view {
			width: #{702rpx};
			line-height: #{80rpx};
			height: #{80rpx};
			margin: #{20rpx} auto;
			border-radius: #{40rpx};
			background-color: #446dfd;
			color: #fff;
			font-size: #{32rpx};
			text-align: center;
		}
	}

	.add.iphone_x {
		height: #{170rpx};
		padding-bottom: #{50rpx};
	}

	.placeholder {
		height: #{120rpx};
	}

	.placeholder.iphone_x {
		height: #{170rpx};
	}

	.dialog {
		position: fixed;
		height: 100%;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 10;
		background-color: rgba(0, 0, 0, .3);

		.dialog-item {
			padding-top: #{20rpx};
			position: fixed;
			top: 25%;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: #{620rpx};
			border-radius: #{16rpx};
			background-color: #fff;
			text-align: center;
		}

		.submit-info {
			font-size: #{28rpx};
			color: #999999;
			padding: #{34rpx} 0 #{52rpx};
		}

		.btn-area {
			height: #{88rpx};
			position: relative;
			border-top: #{1rpx} solid #e2e2e2;

			.line {
				height: #{32rpx};
				width: #{1rpx};
				background-color: #e2e2e2;
				position: absolute;
				top: #{28rpx};
				left: 0;
				right: 0;
				margin: 0 auto;
			}

			.submit-btn {
				height: #{88rpx};
				line-height: #{88rpx};
				font-size: #{32rpx};
				color: #666;
				width: #{310rpx};
				text-align: center;
			}

			.submit-btn.be-submit {
				color: #446dfd;
			}
		}

		.dialog-title {
			text-align: center;
			font-size: #{32rpx};
			color: #353535;
			margin: #{23rpx} 0 0;
		}
	}
</style>
